<template>
  <div>
      <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="(item, index) in list" :key="index">
      <img class="img" :src="item.imageUrl" alt="">
    </el-carousel-item>
  </el-carousel>
    <h3>推荐音乐</h3>
    <!-- 歌曲列表 -->
    <!-- 使用组件 -->
    <songList ref="songList"></songList>
    <!-- <table class="table">
        <tr>
            <th class="h1">音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
        </tr>
        <tr v-for="(item, index) in musicList" :key="index" @click='btnClick(item.id)'>
            <td class="item-td">
                <span class="span">{{index+1}}</span>
                <img class="iconImg" :src="item.picUrl" alt="">
                <span>{{item.song.name}}</span>
            </td>
            <td>{{item.song.artists|filterName}}</td>
            <td>{{item.song.album.name}}</td>
            <td>{{item.song.duration|Time}}</td>
        </tr>
    </table> -->
  </div>
</template>

<script>
// 导入组件
import songList from '../components/songList'
// import moment from 'moment'
// import axios from 'axios'
import {getBanner,getSong} from '../api/index.js'
// import {getSong} from '../api/index.js'
export default {
    // 注册组件
    components:{
        songList
    },
        // filters:{
        //     // 过滤器过滤 歌手名
        //     filterName(arr){
        //         return arr.map(item2=>{
        //             return item2.name
        //         }).join(' & ')
        //     },

        //     //过滤器转换时间戳
        //     Time(num){
        //         return moment(num).format('mm:ss')
        //     }
        // },
     data() {
        return {
            list:[],
            musicList:[]
        }
    },
    created() {
        // axios({
            //     url:'https://autumnfish.cn/banner?sd'+Math.random()*999
        // }).then(res=>{
            //     this.list=res.data.banners
        //     // window.console.log(res);
        // })
    // 获取轮播图片
        getBanner().then(res=>{
            this.list=res.data.banners
            // window.console.log(res);
        })
        // 获取推荐音乐
        getSong().then(res=>{
            this.$refs.songList.list=res.data.result
            // window.console.log(res);
        })

        //  axios({
        //     url:'https://autumnfish.cn/personalized/newsong?dsad'+Math.random()*999
        // }).then(res=>{
        //     this.$refs.songList.list=res.data.result
        //     // window.console.log(res);
        // })

    },
    // methods: {
    //     btnClick(id){
    //         this.$router.push('/audioPlay?id='+id)
    //     }
    // },
}
</script>

<style>
   .img{
        width: 100%;
    }
   
</style>